<script setup>
import { ref, onMounted } from 'vue'
import { orderQueryOrder, orderQueryItemOrder } from '@/apis/apis.js'

const paymentMethodList = ref([
  {
    // icon: WxPay,
    title: '微信',
    paymentName: 'WxPay'
  },
  {
    // icon: AliPay,
    title: '支付宝',
    paymentName: 'AliPay'
  },
  {
    // icon: UnionPay,
    title: '银联',
    paymentName: 'UnionPay'
  },
  {
    // icon: CashPay,
    title: '现金',
    paymentName: 'CashPay'
  },
  {
    // icon: MemberPay,
    title: '会员余额',
    paymentName: 'MemberPay'
  },
])
const orderTime = ref([])
const orderNumber = ref('')
const paymentMethod = ref('')
const tableNumber = ref('')
const diningPartySize = ref('')
const tableData = ref([])
const page = ref(1)
const total = ref(0)
const drawerVisible = ref(false)
const orderData = ref([])

const getTableData = async () => {
  const res = await orderQueryOrder({
    orderTime: orderTime.value,
    orderNumber: orderNumber.value,
    paymentMethod: paymentMethod.value,
    tableNumber: tableNumber.value,
    diningPartySize: diningPartySize.value,
    page: page.value
  })
  tableData.value = res.data.res
  total.value = res.data.total
}

const getOrderData = async (goods_id) => {
  const res = await orderQueryItemOrder({ goods_id })
  orderData.value = res.data
}

const handleFilterSearch = () => {
  page.value = 1
  getTableData()
}

const handleCurrentChange = () => {
  getTableData()
}

const showDetail = async (row) => {
  await getOrderData(row._id)
  drawerVisible.value = true
}

onMounted(async () => {
  await getTableData()
})
</script>

<template>
  <el-card>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="交易查询">
          <el-date-picker v-model="orderTime" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="x" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="订单号">
          <el-input placeholder="请输入完整订单号精确查询" v-model.trim="orderNumber" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="支付方式">
          <el-select v-model="paymentMethod" placeholder="选择支付方式" clearable>
            <el-option v-for="paymentMethod in paymentMethodList" :key="paymentMethod.paymentName"
              :label="paymentMethod.title" :value="paymentMethod.paymentName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="桌号">
          <el-input placeholder="请输入完整桌号" type="number" v-model="tableNumber" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="用餐人数">
          <el-input placeholder="请输入用餐人数" type="number" v-model="diningPartySize" />
        </el-form-item>
      </el-col>
    </el-row>
    <div class="filter-search">
      <el-button type="warning" size="default" @click="handleFilterSearch">查询</el-button>
    </div>
    <el-table :data="tableData">
      <el-table-column label="交易时间" prop="orderTime" />
      <el-table-column label="商品" prop="productName" />
      <el-table-column label="商品数量" prop="productOrderCount" />
      <el-table-column label="支付方式">
        <template #default="{ row }">{{ paymentMethodList.find(value => value.paymentName === row.paymentMethod).title
          }}</template>
      </el-table-column>
      <el-table-column label="交易金额(元)" prop="paymentPrice" />
      <el-table-column label="订单详情">
        <template #default="{ row }">
          <el-button type="warning" size="small" @click="showDetail(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :page-size="10" v-model:current-page="page" background layout="prev, pager, next" :total="total"
      :hide-on-single-page="true" @current-change="handleCurrentChange" />
  </el-card>
  <el-drawer v-model="drawerVisible" title="" direction="rtl">
    <el-table :data="orderData[0]?.productOrder">
      <el-table-column label="商品" prop="goods_name" />
      <el-table-column label="规格" prop="attribute" />
      <el-table-column label="数量" prop="quantity" />
      <el-table-column label="小计" prop="totalPrice" />
    </el-table>
    <div class="detail">
      <p><span class="detail-item">桌号</span>{{ orderData[0]?.tableNumber }}<span></span></p>
      <p><span class="detail-item">用餐人数</span>{{ orderData[0]?.diningPartySize }}<span></span></p>
      <p><span class="detail-item">下单时间</span>{{ orderData[0]?.orderTime }}<span></span></p>
      <p><span class="detail-item">合计总价</span><span>￥{{ orderData[0]?.paymentPrice }}</span></p>
      <p><span class="detail-item">订单号</span><span>{{ orderData[0]?.orderNumber }}</span></p>
    </div>
  </el-drawer>
</template>

<style scoped lang="scss">
.filter-search {
  margin: 20px 0;
}

.el-table {
  margin-bottom: 80px;
}

.el-pagination {
  justify-content: center;
}

.detail {
  padding: 10px;
  background-color: rgba($color: #eee, $alpha: 0.3);
  font-size: 14px;

  p {
    display: flex;
    line-height: 30px;
  }

  .detail-item {
    width: 80px;
  }
}
</style>
